{% extends 'layout.html'%}
{% block content %}
<div class="container">
    <div style="margin-bottom: 10px;">
      <a href="/pretty/add/" class="btn btn-success">
        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
        新建靓号
      </a>     
      <div style="float: right;width: 300px;">
        <form method="get">
          <div class="input-group">         
            <input type="text" name="q" class="form-control" placeholder="请输入电话号" value="{{search_data}}">
            <span class="input-group-btn">
              <button class="btn btn-default" type="submit">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
              </button>
            </span>
          </div><!-- /input-group -->
        </form>       
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
        靓号列表
      </div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>号码</th>
            <th>价格</th>
            <th>级别</th>
            <th>状态</th>           
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
            {% for obj in queryset %}
                <tr>               
                    <td>{{obj.id}}</td>
                    <td>{{obj.mobile}}</td>
                    <td>{{obj.price}}</td>
                    <td>{{obj.get_level_display}}</td>
                    <td>{{obj.get_status_display}}</td>
                    <td>
                    <a href="/pretty/{{obj.id}}/edit" class="btn btn-primary btn-xs">编辑</a>
                    <a href="/pretty/{{obj.id}}/delete" class="btn btn-danger btn-xs">删除</a>
                    </td>
                </tr>   
            {% endfor %}    
        </tbody>
      </table>
    </div>
    <nav aria-label="Page navigation">
      <ul class="pagination">       
        {{page_string}} 
      </ul>
    </nav>
    
  </div>
{% endblock %}